<!-- Mavo Markdown 编辑器 -->
<template>
  <div>
    <a-input addon-before="标题" v-model="title" @change="changeTitle">
      <a-select
        slot="addonAfter"
        v-model="type"
        style="width: 95px; z-index: 9999;"
      >
        <a-select-option value="前端">前端技术</a-select-option>
        <a-select-option value="后端">后端技术</a-select-option>
        <!-- <a-select-option value="FSR 4.0">FSR 4.0</a-select-option> -->
        <a-select-option value="疑问">疑问</a-select-option>
        <a-select-option value="其他技术">其他技术</a-select-option>
      </a-select>
    </a-input>
    <mavon-editor
      v-model="content"
      ref="md"
      @change="change"
      @imgAdd="uploadImg"
      @imgDel="delImg"
      placeholder="可以在此处写下的你想法或问题"
      style="height: 410px; z-index: 1;"
    />
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { mavonEditor } from "mavon-editor";
import { uploadImg } from "@/apis/common";
import "mavon-editor/dist/css/index.css";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: { mavonEditor },
  data() {
    // 这里存放数据
    return {
      data: {},
      title: "",
      type: "发布板块",
      content: "", // 输入的markdown
      html: "" // 及时转的html
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    type(nv, ov) {
      this.data.type = nv;
      this.$emit("content", this.data);
    },
    title(nv,ov) {
      // console.log(nv);
    }
  },
  //方法集合
  methods: {
    changeTitle(value){
      // console.log(value);
    },
    // 所有操作都会被解析重新渲染
    change(value, render) {
      // render 为 markdown 解析后的结果[html]
      this.html = render;
      let data = {
        title: this.title,
        content: this.content,
        type: this.type
      };
      this.data = data;
      this.$emit("content", data);
    },
    uploadImg(pos, $file) {
      var that = this;
      let formData = new FormData();
      formData.append("file", $file);
      uploadImg(formData).then(res => {
        // console.log(res);
        that.$refs.md.$imglst2Url([[pos,res.data]])
      })
    },
    delImg(){},
    // 提交
    submit() {

    },
    select(val) {
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
/* @import url(); 引入公共css类 */
</style>